<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>智能排班系统后台登录</title>
    <!-- Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content="">

    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta-Tags -->
    <!-- Stylesheets -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <link href="../css/style1.css" rel='stylesheet' type='text/css'/>
    <!--// Stylesheets -->
    <!--online fonts-->
    <!--<link href="http://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">-->
    <!--//online fonts-->
</head>

<body >
<h1>智能排班系统后台登录</h1>
<div class="w3ls-login box" id="app">
    <!--<img src="../img/logo.png" alt="logo_img" />-->
    <!-- form starts here -->
    <form>
        <div class="agile-field-txt">
            <input type="text" v-model="loginName" placeholder="请输入用户名" required="" id="username" @blur="checkLoginName()"/>
        </div>
        <div class="agile-field-txt">
            <input type="password" v-model="pwd" placeholder="请输入密码" required="" id="myInput" @blur="checkPassword()"/>
        </div>
        <div class="agile-field-txt">
            <input type="text" v-model="cold" placeholder="请输入验证码" required="" id="code" @blur="checkCold()" style="width: 300px;"/>
            <span><img src="/cold/getCold" alt="" onclick="changeCheckCode(this)" id="img" style="height: 40px;width: 100px;"></span>
        </div>
        <script type="text/javascript">
            //图片点击事件
            function changeCheckCode(img) {
                img.src = "/cold/getCold?" + new Date().getTime();
            }
        </script>
        <div class="w3ls-bot">
            <span style="color: red">{{msg}}</span>
            <input type="button" value="登录" @click="login()">
        </div>
    </form>
</div>
<script th:inline="javascript">
    var app = new Vue({
        el:"#app",
        data:{
            loginName:"",
            pwd:"",
            cold:"",
            msg:""
        },
        methods:{
            login:function () {
                if (app.loginName.length===0) {
                    app.msg="未填写用户名";
                    return;
                }else{
                    app.msg="";
                }
                if (app.pwd.length===0) {
                    app.msg="未填写密码";
                    return;
                }else{
                    app.msg="";
                }
                if (app.cold.length===0) {
                    app.msg="未填写验证码";
                    return;
                }else{
                    app.msg="";
                }
                axios.get("/user/login?cold="+app.cold+"&loginName="+app.loginName+"&pwd="+app.pwd).then(function (response) {
                    if (response.data.flag){
                        app.msg=response.data.message;
                        location.href="/pages/main.html";
                    } else{
                        app.msg=response.data.message;
                        $("#img").attr("src","/cold/getCold?" + new Date().getTime());
                    }
                })
            },
            checkLoginName:function (){
                if (app.loginName.length===0) {
                    app.msg="未填写用户名";
                }else{
                    app.msg="";
                }
            },
            checkPassword:function (){
                if (app.pwd.length===0) {
                    app.msg="未填写密码";
                }else{
                    app.msg="";
                }
            },
            checkCold:function (){
                if (app.cold===0) {
                    app.msg="未填写验证码";
                }else{
                    app.msg="";
                }
            }
        }
    })
</script>
</body>


</html>